<template>
  <div :style="style" class="document-nav-panel">
    <div id="panel-wrapped" class="document-nav-panel__wrapped">
      <CommonGrid :data="options" :cols="3">
        <template #default="{ data }">
          <div
            :class="[modelValue === data.id && 'is-active']"
            class="document-nav__item"
            @tap="onSelect(data.id)"
          >
            {{ data.name }}
          </div>
        </template>
      </CommonGrid>
    </div>
  </div>
</template>

<script setup lang="ts">
import Taro, { useReady } from "@tarojs/taro";
import { computed, ref, watch } from "vue";
import CommonGrid from "@/components/common-grid/index.vue";

defineOptions({
  name: "document-nav-panel",
});

useReady(() => {
  computedPanelHeight();
});

const props = withDefaults(
  defineProps<{
    modelValue: number | null;
    visible: boolean;
    options?: any[];
  }>(),
  {}
);

const emits = defineEmits(["update:modelValue", "update:visible"]);

const panelHeight = ref(0);

const style = computed(() => {
  const { visible } = props;
  return {
    height: visible ? `${panelHeight.value}px` : 0,
  };
});

const computedPanelHeight = () => {
  Taro.createSelectorQuery()
    .select("#panel-wrapped")
    .boundingClientRect()
    .exec((res) => {
      if (!res || !res[0]) return;
      const { height } = res[0];
      panelHeight.value = height;
    });
};

const onSelect = (value: number) => {
  if (props.modelValue !== value) {
    emits("update:modelValue", value);
    emits("update:visible", false);
  }
};

watch(
  () => props.options,
  () => {
    computedPanelHeight();
  },
  { deep: true, immediate: true }
);
</script>

<style lang="less">
.document-nav-panel {
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  background-color: #fbfffe;
  border-radius: 0 0 10px 10px;
  will-change: height;
  transition: all 0.1s;
  &__wrapped {
    padding: 20px 44px 30px 44px;
    box-sizing: border-box;
    .document-nav__item {
      width: 100%;
      height: 56px;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 8px;
      border: 2px solid #d6d6d6;
      text-align: center;

      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;

      font-weight: 400;
      font-size: 24px;
      color: #000000;
      line-height: 34px;
      &.is-active {
        background-color: #d3f4ed;
        border-color: #d3f4ed;
        color: #60b89b;
        font-weight: bold;
      }
    }
  }
}
</style>
